<template>
	<view class="appCenter">
		<u-toast ref="uToast" />
		<view class="wrop appTabs">
			<view class="search box box-align-center box-pack-between">
				<input type="text" v-model="install" placeholder="请输入您要搜索的应用名称" placeholder-class="placeholder"
					placeholder-style="color:#a9a9a9;font-size:24rpx" />
				<view class="search_img" @click="gotoApp">
					<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/shousou.png" mode=""></image>
				</view>
			</view>
			<scroll-view scroll-y style="height: 100%;width: 100%;" class="swiper-box">
				<view class="appInstall">
					<view class="appInfo box box-align-center box-pack-between" v-for="item in appData" :key="item.id">
						<view class="box box-align-center">
							<view class="app_img">
								<image :src="item.app_img" mode=""></image>
							</view>
							<view class="app_text">
								<view class="text_title">{{item.app_name}}</view>
								<view class="text">{{item.app_size | zhDate}} | {{item.app_installs}}次下载</view>
								<view class="text">{{item.app_developer}}</view>
							</view>
						</view>
						<view class="ann_button">
							<button type="default" @click="appPush(item.id)" :class="item.hide ? 'hide' : ''"
								:disabled="item.hide ? true: false">{{item.hide ? '已推送' : '推送'}}</button>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		getSubject,
		getAdminApp,
		appInstall
	} from '@/api/application.js'
	export default {
		data() {
			return {
				install: '',
				appData: [],
				appShow:false,
				appId: 0
			}
		},
		onLoad(options) {
			this.install = options.install;
			this.getAdminApp(2, {
				appName: options.install,
				snId: uni.getStorageSync('snId')
			})
			console.log('传过来的数据', this.install)
		},
		computed: {
			//pageShow: return uni.getStorageSync('snId') ? true: false
		},
		methods: {
			appPush(id) {
				uni.navigateTo({
					// url: '/pages/application/appDetails/index?appId=' + id
					url: '/pages_subpackage/appDetails/index?appId=' + id
				})
			},
			//获取应用信息
			getAdminApp(type, params) {
				let data = {
					type: type,
					...params
				}
				getAdminApp(data).then(res => {
					this.appData = res.data
				}).catch(err => {
					this.appData = []
				})
			},
			//前往安装应用
			gotoApp() {
				if (!this.install) return this.$refs.uToast.show({
					title: '请输入关键字',
					type: 'error',
					icon: false
				})
				this.getAdminApp(2, {
					appName: this.install,
					snId: uni.getStorageSync('snId')
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.hide {
		background-color: #999999 !important;
	}

	.swiper-box {
		flex: 1;
		overflow-y: scroll;
	}

	.wrop {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
	}

	.appCenter {
		background-color: #FFFFFF;

		image {
			width: 100%;
			height: 100%;
		}

		.search {
			color: #333333;
			padding: 20rpx;
			border-radius: $uni-border-radius-lg;
			background-color: #eeeeee;
			margin: 0 40rpx;

			input {
				width: 85%;
			}

			.search_img {
				height: 40rpx;
				width: 40rpx;
				overflow: hidden;
			}
		}

		.appTabs {
			padding-top: 40rpx;

			.appInstall {
				margin: 0 40rpx;

				.appInfo {
					margin-top: 40rpx;
					padding-bottom: 10rpx;
					border-bottom: 1rpx solid #e9e9e9;

					.app_img {
						height: 100rpx;
						width: 100rpx;
						margin-right: 20rpx;
					}

					.app_text {
						color: #333333;

						.text_title {
							font-size: 28rpx;

							text {
								background-color: #fd5872;
								padding: 0 20rpx;
								display: inline-block;
								color: #FFFFFF;
								margin-left: 20rpx;
								font-size: 22rpx;
							}
						}

						.text {
							font-size: 22rpx;
						}
					}

					.ann_button {
						button {
							border: none;
							// background-image: -webkit-linear-gradient(90deg, #ec8f19 0%, #f75e50 100%);
							background-color: #4880ff;
							font-size: 24rpx;
							border-radius: $uni-border-radius-lg;
							color: #ffffff;
							text-align: center;
							min-width: 135rpx;
						}
					}
				}

				.appInfo:last-child {
					border-bottom: none;
				}
			}
		}
	}
</style>
